:root {
  --footer-background: #212529;
  --footer-padding-tb: 2em;
  --footer-element-spacing: 1em;

  --header-font-size: 3.1rem;
  --info-font-size: 1.5rem;

  --svg-text-spacing: 0.4em;
}

.footer {
  background-color: var(--footer-background);

  padding: var(--footer-padding-tb) 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  width: 100%;
}

.footer * {
  color: #fff;
  fill: #fff;
}

#header {
  align-items: center;
  justify-content: center;

  text-align: center;
  font-weight: 600;
  font-size: var(--header-font-size);

  margin-bottom: calc(var(--footer-element-spacing) / 3);

  height: auto;
  width: 100%;
}

#policy {
  margin-bottom: calc(var(--footer-element-spacing) * 2);
}

#info {
  width: 100%;
  height: auto;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
}

.info-container {
  /* width: 50%; */
  flex: 1;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  column-gap: var(--footer-padding-tb);

  font-size: var(--info-font-size);
}

#info > * > a {
  margin-bottom: var(--footer-element-spacing);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#info > * > a > svg,
#policy > a > svg {
  margin-right: var(--svg-text-spacing);

  scale: 1.5;
}

@media only screen and (max-width: 1000px) {
  .info-container {
    flex-direction: column;
  }
}